.report-container {
    width: 100%;
    height: calc(100vh - 86px);
    padding: 24px;
    background-color: #F3F7FB;
    ;
    display: flex;

    // flex-direction: column;
    //
    .answer-card {
        width: 350px;
        height: 100%;
        background: #FFFFFF;
        border-radius: 5px;
        box-shadow: 0 0 10px #ccc;
        overflow: auto;
        margin-right: 25px;

        .items-view {
            width: 100%;
            padding: 17px 24px;
            display: flex;
            flex-wrap: wrap;

            .item {
                width: 31px;
                height: 32px;
                background: #FFFFFF;
                margin-right: 12px;
                margin-bottom: 12px;
                text-align: center;
                line-height: 32px;
                font-size: 16px;
                cursor: pointer;
            }

            .nomal {
                color: #2BC8A0;
                border: 1px solid #2BC8A0;
                background: #E9F9F5;
            }

            .select {
                color: #FF5A5A;
                background: #FFEEEE;
                border: 1px solid #FF5A5A;
            }

        }

        .warning {
            margin-left: 24px;
            width: 248px;
            font-size: 12px;
            color: #D95350;
        }
    }

    .rightview {
        flex: 1;
        height: 100%;

        .top {
            height: 260px;
            width: 100%;
            background: #FFFFFF;
            padding-top: 20px;
            padding-right: 30px;
            border-radius: 5px;
            box-shadow: 0 0 10px #ccc;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            .score-view {
                color: #333;
                font-weight: 600;
                height: 200px;
                width: 480px;
                display: flex;
                align-items: center;

                .item {
                    width: 50%;
                    padding-left: 35px;

                    .item-title {
                        margin-bottom: 30px;
                    }

                    .item-score {
                        color: #3C7CFC;
                        font-size: 64px;

                        .gary {
                            color: #ccc;
                            font-size: 14px;
                        }
                    }
                }
            }
        }

        .bottom {
            color: #3C464F;
            font-size: 14px;
            width: 100%;
            background: #FFFFFF;
            border-radius: 5px;
            padding: 23px 25px 60px 25px;
            box-shadow: 0 0 10px #ccc;

            .title-view {
                display: flex;
                align-items: center;
                font-weight: 600;
                color: #333;

            }

            .item {
                padding-top: 30px;
                padding-bottom: 14px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .count {
                    color: #2BC8A0;
                }

                border-bottom: 1px solid #eee;
            }

        }
    }
}